<template>
  <div>
    <el-card shadow="hover">
      <el-card shadow="hover">
        <!-- <div slot="header" class="clearfix"></div> -->
        用户账号：
        <el-input placeholder="用户账号" v-model="nameinput" style="width: 140px" size="small" clearable>
        </el-input>
        <!-- 时间卡 -->
        充值日期：
        <el-date-picker size="small" v-model="datevalue" style="width: 300px" :change="datechange(datevalue)"
          type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="开始日期"
          end-placeholder="结束日期" :picker-options="pickerOptions" format="yyyy 年 MM 月 dd 日"
          value-format="yyyy-MM-dd HH:mm:ss">
        </el-date-picker>
        &ensp;&ensp;
        <!-- 时间卡 -->
        <el-button type="primary" size="small" @click="timequery()" icon="el-icon-search">
          查询充值</el-button>
      </el-card>
      <!-- 表格开始 -->
      <el-card shadow="hover">

        <el-button plain type="success" icon="el-icon-success" size="mini" @click="successexamine()">已通过</el-button>
        <el-button plain type="danger" icon="el-icon-error" size="mini" @click="failexamine()">已驳回</el-button>
        <el-button plain type="info" icon="el-icon-loading" size="mini" @click="examineing()">
          待审核</el-button>
        <el-button type="primary" plain size="mini" icon="el-icon-notebook-1
" @click="allexamine()">刷新列表</el-button>

        <span style="font-weight: 600; font-size: 15px; font-family: 'Courier New', Courier, monospace;
          text-align: center;"> 请务必核对金额-时间-进行充值 <i class="el-icon-time"></i>系统时间：{{ nowTime }}</span>
        <br><br>
        <el-table ref="multipleTable" :data="tableData" border tooltip-effect="dark" style="width: 100%"
          @selection-change="handleSelectionChange">
          <!-- 审核状态 -->
          <el-table-column align="center" width="110" prop="status" label="审核状态" show-overflow-tooltip>
            <template slot-scope="scope">
              <span class="p3" v-if="scope.row.status == '0'">
                <i class="el-icon-loading"></i> 待审核</span>
              <span class="p1" v-if="scope.row.status == '1'">
                <i class="el-icon-success"></i> 已通过</span>
              <span class="p2" v-if="scope.row.status == '2'"><i class="el-icon-error"></i> 已驳回</span>
            </template>
          </el-table-column>
          <!-- 审核状态 -->
          <!-- 充值时间 -->
          <el-table-column label="充值时间" width="160" align="center">
            <template slot-scope="scope">{{ scope.row.createTime }}</template>
          </el-table-column>
          <!-- 充值账户 -->
          <el-table-column prop="username" width="160" label="充值账户" align="center">
          </el-table-column>
          <!-- 充值类型 -->
          <el-table-column align="center" label="充值类型" show-overflow-tooltip>
            <template slot-scope="scope">
              <span @click="handleDelete(scope.$index, scope.row)" style="
                  color: #666;
                  font-family: 'Courier New', Courier, monospace;
                ">{{ scope.row.type }}</span>
            </template>
          </el-table-column>
          <!-- 充值金额 -->
          <el-table-column prop="qian" align="center" width="160" label="充值金额" show-overflow-tooltip>
            <template slot-scope="scope">
              <span style="font-weight: 800"> ￥{{ scope.row.money }}</span>
            </template>
          </el-table-column>

          <!-- 截图 -->
          <el-table-column align="center" prop="eUrl" label="充值截图" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>
                <img @click="imgaaa(scope.row.image)" :src="scope.row.image" width="85px" height="85px" alt="" /></span>
            </template>
          </el-table-column>
          <!-- 图截图⽚预览 -->
          <el-table-column prop="params" label="备注" align="center">
          </el-table-column>
          <!-- 操作 -->
          <el-table-column align="center" label="充值操作">
            <template slot-scope="scope">
              <!-- 通过弹框 -->
              <el-popconfirm confirm-button-text="确认" cancel-button-text="取消" @onConfirm="successconfirm()"
                @onCancel="successcancel()" icon="el-icon-info" icon-color="red" title="您确定通过吗？">
                <el-button style="margin-left: 5px; margin-right: 5px" plain size="mini" slot="reference" type="success"
                  icon="el-icon-success" @click="handleEdit(scope.$index, scope.row)">通过</el-button>
              </el-popconfirm>
              <!-- 通过弹框 -->
              <!-- 驳回 -->
              <el-popconfirm confirm-button-text="确认" cancel-button-text="取消" @onConfirm="failconfirm()"
                @onCancel="failcancel()" icon="el-icon-info" icon-color="red" title="您确定驳回吗？">
                <el-button size="mini" slot="reference" plain type="danger" icon="el-icon-error"
                  @click="handleDelete(scope.$index, scope.row)">驳回</el-button>
              </el-popconfirm>
              <!-- 驳回 -->
            </template>
          </el-table-column>
        </el-table>
        <!-- 表格结束 -->

        <!-- 分页查询 -->
        <div class="block">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="this.pageCode" :page-sizes="[10, 20, 30, 40]" :page-size="this.pageSize"
            layout="total, sizes, prev, pager, next, jumper" :total="this.totalCount">
          </el-pagination>
        </div>
        <!-- 分页查询 -->

        <!-- 图⽚预览 -->
        <el-dialog title="充值截图预览" :visible.sync="imgvisible" :close-on-click-modal="false" width="50%" center>
          <img :src="this.previewpic" width="100%" alt="" />
          <span slot="footer" class="dialog-footer">
            <el-button type="danger" @click="imgvisible = false">退出预览</el-button>
          </span>
        </el-dialog>
      </el-card>
    </el-card>
  </div>
</template>

<script>
import debounce from "lodash.debounce";
import { getExamine, updateExamine } from "@/api/order";

export default {
  async created() {
    let Examine = await getExamine();
    //console.log(Examine.data.pageList);
    this.tableData = Examine.data.pageList;
    this.totalCount = Examine.data.totalCount;
    this.pageCode = Examine.data.pageCode;
    // 要显示时间，在渲染页面之前一直调用该函数，对this.time进行赋值开启定时
    this.timer = setInterval(() => {
      this.nowTime = new Date().toLocaleString();
    });
    ////console.log("1111", this.$store.state.user.role);
  },
  data() {
    return {
      totalCount: 1,
      pageSize: 10,
      pageCode: 1,
      //通过
      handleEditid: "",
      handleEditstatus: "",
      handleEditusername: "",
      handleEditmoney: "",
      handleEdittime: "",
      //驳回
      handleDeleteid: "",
      handleDeletestatus: "",
      handleDeleteusername: "",
      handleDeletemoney: "",
      handleDeletetime: "",
      //计时器
      timer: undefined,
      nowTime: new Date(),
      //时间
      datevalue: "",
      //当前页码
      currentPage: 1,
      //预览图片
      imgvisible: false,
      status: "",
      nameinput: "",
      typeinput: "",
      previewpic: "",
      tableData: [],
      multipleSelection: [],
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      datevalue: "",
    };
  },
  // 关闭页面销毁定时器
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer);
    }
  },
  methods: {
    //时间查询
    timequery: debounce(async function () {
      // //console.log("时间", this.datevalue);
      // //console.log(this.datevalue[0], this.datevalue[1]);
      ////console.log("名字", this.nameinput);
      let data = {
        username: this.nameinput,
        startTime: this.datevalue[0],
        endTime: this.datevalue[1],
      };
      let Examine = await getExamine(data);
      //console.log(Examine.data.pageList);
      this.tableData = Examine.data.pageList;
      this.totalCount = Examine.data.totalCount;
      this.pageCode = Examine.data.pageCode;
    }, 500),
    //时间改变
    datechange(datevalue) {
      // //console.log("时间", datevalue);
      this.datevalue = datevalue;
    },
    //查询状态-刷新状态
    allexamine: debounce(async function () {
      this.status = "";
      let Examine = await getExamine();
      this.tableData = Examine.data.pageList;
      this.totalCount = Examine.data.totalCount;
      this.pageCode = Examine.data.pageCode;
    }, 500),

    //查询状态-已通过
    successexamine: debounce(async function () {
      this.status = 1;
      let data = {
        username: this.nameinput,
        pageSize: this.pageSize,
        pageNum: 1,
        startTime: this.datevalue[0],
        endTime: this.datevalue[1],
        status: this.status,
      };
      let Examine = await getExamine(data);
      this.tableData = Examine.data.pageList;
      this.totalCount = Examine.data.totalCount;
      this.pageCode = Examine.data.pageCode;
    }, 500),

    //查询状态-已驳回
    failexamine: debounce(async function () {
      this.status = 2;
      let data = {
        username: this.nameinput,
        pageSize: this.pageSize,
        pageNum: 1,
        startTime: this.datevalue[0],
        endTime: this.datevalue[1],
        status: this.status,
      };
      let Examine = await getExamine(data);
      this.tableData = Examine.data.pageList;
      this.totalCount = Examine.data.totalCount;
      this.pageCode = Examine.data.pageCode;
    }, 500),

    //查询状态-待审核
    examineing: debounce(async function () {
      this.status = 0;
      let data = {
        username: this.nameinput,
        pageSize: this.pageSize,
        pageNum: 1,
        startTime: this.datevalue[0],
        endTime: this.datevalue[1],
        status: this.status,
      };
      let Examine = await getExamine(data);
      this.tableData = Examine.data.pageList;
      this.totalCount = Examine.data.totalCount;
      this.pageCode = Examine.data.pageCode;
    }, 500),

    //表格分页
    async handleSizeChange(val) {
      //console.log(`每页 ${val} 条`);
      this.pageSize = val;
      let data = {
        username: this.nameinput,
        pageSize: this.pageSize,
        pageNum: this.pageCode,
        startTime: this.datevalue[0],
        endTime: this.datevalue[1],
        status: this.status,
      };
      let Examine = await getExamine(data);
      this.tableData = Examine.data.pageList;
      this.totalCount = Examine.data.totalCount;
    },
    async handleCurrentChange(val) {
      //console.log(`当前页: ${val}`);
      //console.log(this.nameinput);
      this.pageCode = val;
      let data = {
        username: this.nameinput,
        pageSize: this.pageSize,
        pageNum: this.pageCode,
        startTime: this.datevalue[0],
        endTime: this.datevalue[1],
        status: this.status,
      };
      let Examine = await getExamine(data);
      this.tableData = Examine.data.pageList;
      this.totalCount = Examine.data.totalCount;
    },
    //行内选择
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      //console.log(val);
    },
    //通过
    async handleEdit(index, row) {
      //  console.log(index, row);
      this.handleEditid = row.id;
      this.handleEditstatus = row.status;
      this.handleEditusername = row.username;
      this.handleEditmoney = row.money;
      this.handleEdittime = row.createTime;
    },
    //通过确认
    async successconfirm() {
      if (this.handleEditstatus == 0) {
        //console.log("success确认", this.handleEditid);
        let data = {
          status: 1,
          id: this.handleEditid,
          money: this.handleEditmoney,
          time: this.handleEdittime,
          username: this.handleEditusername,
        };
        await updateExamine(data);
        this.allexamine();
      } else {
        this.$message.error("已审核，不可更改");
      }
    },
    //通过取消
    successcancel() {
      //console.log("success取消", this.handleEditid);
    },
    //驳回
    handleDelete(index, row) {
      //console.log(index, row);
      this.handleDeleteid = row.id;
      this.handleDeletestatus = row.status;
      //console.log("88888", row.id);
      this.handleDeleteusername = row.username;
      this.handleDeletemoney = row.money;
      this.handleDeletetime = row.createTime;
    },

    //驳回确认
    async failconfirm() {
      if (this.handleDeletestatus == 0) {
        //console.log("驳回确认", this.handleDeleteid);
        let data = {
          status: 2,
          id: this.handleDeleteid,
          money: this.handleDeletemoney,
          time: this.handleDeletetime,
          username: this.handleDeleteusername,
        };
        await updateExamine(data);
        this.allexamine();
      } else {
        this.$message.error("已审核，不可更改");
      }
    },
    //驳回取消
    failcancel() {
      //console.log("驳回取消", this.handleDeleteid);
    },
    //预览
    imgaaa(i) {
      //console.log(i);
      this.previewpic = i;
      this.imgvisible = true;
    },
    //计时器
    FormatTime() {
      //设置返回显示的日期时间格式
      var date = new Date();
      var year = this.formatTime(date.getFullYear());
      var month = this.formatTime(date.getMonth() + 1);
      var day = this.formatTime(date.getDate());
      var hour = this.formatTime(date.getHours());
      var minute = this.formatTime(date.getMinutes());
      var second = this.formatTime(date.getSeconds());
      var weekday = date.getDay();
      var weeks = new Array(
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六"
      );
      var week = weeks[weekday];
      //这里设置你要显示的格式
      return `${year}年-${month}月-${day}日 ${hour}:${minute}:${second} ${week}`;
    },
    formatTime(n) {
      //判断时间是否需要加0
      if (n < 10) {
        return "0" + n;
      } else {
        return n;
      }
    },
  },
};
</script>
<style>
.p1 {
  display: inline-block;
  width: 80px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  color: #fff;
  background-color: #85ce61;
  border: 1px solid #e4e5e6;
  border-radius: 20px;
}

.p2 {
  display: inline-block;
  width: 80px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  color: #fff;
  background-color: #f56c6c;
  border: 1px solid #e4e5e6;
  border-radius: 20px;
}

.p3 {
  display: inline-block;
  width: 80px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  color: #fff;
  background-color: #666;
  border: 1px solid #e4e5e6;
  border-radius: 20px;
}
</style>